<template>
  <div class="login-container">
    <div class="login-box">
      <h2 class="title">开心单词</h2>
      <p class="subtitle"></p>
      <form @submit.prevent="handleLogin" class="login-form">
        <div class="form-group">
          <label for="username">用户名</label>
          <input 
            type="text" 
            id="username" 
            v-model="username" 
            required 
            placeholder="请输入用户名" 
            class="form-control" 
          />
        </div>
        <div class="form-group">
          <label for="password">密码</label>
          <input 
            type="password" 
            id="password" 
            v-model="password" 
            required 
            placeholder="请输入密码" 
            class="form-control" 
          />
        <div class="container">
          <label class="ios-checkbox">
            <input type="checkbox" v-model="ifSave" />
            <span class="checkmark"></span>
            记住我
          </label>
        </div>
        </div>
        <div class="form-group">
          <button type="submit" class="btn btn-primary">登录</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref ,watch, onMounted} from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import config from '@/config';

const router = useRouter();

const username = ref('');  // 用户名
const password = ref('');  // 密码

//################################
const ifSave = ref(false);


const saveIfSave = () => {
  localStorage.setItem('ifSave', ifSave.value);
};
const loadifSave = () => {
  const savedifSave = localStorage.getItem('ifSave');
  if (savedifSave) {
    ifSave.value = savedifSave;
  }
};

watch(ifSave,saveIfSave)

onMounted(loadifSave);

const loadlogin = ()=> {
  if(ifSave.value)
  {
    const loadusername = localStorage.getItem('username');
    const loadpassword = localStorage.getItem('password');
    if (loadusername && loadpassword) {
    username.value = loadusername;
    password.value = loadpassword;
    }
  }
};
onMounted(loadlogin);
//################################

function handleLogin() {
  localStorage.setItem('username', username.value);
  if(ifSave.value)
  {
    localStorage.setItem('password', password.value);
  } else {
    // 如果用户取消勾选，则清除保存的信息
    localStorage.removeItem('password');
  }
  // 发送用户名和密码到服务器
  axios.post(config.apiUrl +'login.php', {
    username: username.value,
    password: password.value
  })
  .then(response => {
    if (response.data === "登录失败") {
      console.error('登录失败，用户名或密码错误');
    } else {
      // 登录成功，跳转到聊天页面
      router.push({ name: 'main' });

    }
  })
  .catch(error => {
    console.error('登录失败:', error);
  });
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(
    135deg,
    #f5f7fa 0%,     /* 柔和的云朵白 */
    #e3e9ff 25%,    /* 浅薰衣草灰 */
    #d8e4ff 50%,    /* 极淡的婴儿蓝 */
    #eceffd 75%,    /* 细腻的月光银 */
    #f5f7fa 100%    /* 与起始颜色呼应形成无缝循环 */
  );
  background-size: 200% 200%; /* 更紧凑的背景尺寸提升细腻度 */
  animation: gradient 20s ease infinite; /* 更缓和的动画节奏 */
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}



/* 登录框 */
.login-box {
  background: rgba(255, 255, 255, 0.4); /* Lighter background for a more subtle effect */
  padding: 2rem;
  border-radius: 20px; /* Larger radius for softer, modern curves */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* More prominent shadow for a floating effect */
  width: 70%;
  max-width: 420px;
  text-align: center;
  backdrop-filter: blur(15px); /* Stronger blur for a more pronounced glass effect */
  -webkit-backdrop-filter: blur(15px); /* Safari compatibility */
  border: 1px solid rgba(255, 255, 255, 0.2); /* Light border for definition */
  overflow: hidden; /* Prevents content from spilling out of rounded corners */
}


.title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: #333333;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* 添加轻微阴影 */
}

.form-group label {
  font-size: 14px;
  font-weight: 500;
  color: #333333;
}

/* 表单输入框 */
.form-group {
  margin-bottom: 1rem;
  text-align: left;
}

.form-control {
  width: 100%;
  padding: 14px 16px; /* 增加内边距，给输入框更多空间 */
  margin-top: 12px; /* 增加顶部间距，提升整体布局感 */
  border: 1px solid rgba(200, 200, 200, 0.7); /* 更柔和的边框颜色 */
  border-radius: 12px; /* 增加圆角，使外观更加柔和 */
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.9); /* 稍微更不透明的背景 */
  color: #333; /* 深色文字，提升可读性 */
  font-size: 1rem; /* 适中的字体大小 */
  transition: border 0.3s ease-in-out, box-shadow 0.3s ease; /* 平滑过渡 */
}

.form-control:focus {
  border: 1px solid #2575fc; /* 聚焦时的边框颜色 */
  outline: none; /* 去除默认的蓝色轮廓 */
  box-shadow: 0 0 8px rgba(37, 117, 252, 0.5); /* 聚焦时的光晕效果 */
  background: rgba(255, 255, 255, 1); /* 聚焦时背景不透明，提升焦点感 */
}


/* 提交按钮 */

.btn {
  background: linear-gradient(135deg, #e3f2fd, #d1e8ff); /* 冷色调渐变背景 */
  color: #333;
  padding: 14px 30px; /* 增加内边距，使按钮更饱满 */
  border: none;
  border-radius: 25px; /* 适中的圆角设计 */
  cursor: pointer;
  width: 100%;
  font-size: 18px; /* 合适的字体大小 */
  font-weight: 600; /* 加粗字体，使文字更清晰 */
  text-align: center; /* 文字居中 */
  transition: all 0.3s ease; /* 平滑过渡 */
  box-shadow: 0 4px 12px rgba(37, 117, 252, 0.3); /* 柔和的阴影效果 */
}

/* 鼠标悬停时的效果 */
.btn:hover {
  background: linear-gradient(135deg, #d1e8ff, #e3f2fd); /* 悬停时渐变反转 */
  box-shadow: 0 6px 20px rgba(106, 17, 203, 0.3); /* 更显眼的阴影 */
  transform: translateY(-3px); /* 悬停时的轻微上浮效果 */
}

/* 点击时的效果 */
.btn:active {
  transform: translateY(1px); /* 按钮点击时轻微下沉效果 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* 细致的阴影 */
  background: linear-gradient(135deg, #d1e8ff, #e3f2fd); /* 点击时保持反转渐变 */
}

.container {
  margin-top:8px;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
/* 容器样式 */
.ios-checkbox {
  display: inline-block;
  position: relative;
  padding-left: 35px; /* 为复选框留出空间 */
  margin-bottom: 6px;
  cursor: pointer;
  font-size: 16px;
  user-select: none;
}

/* 隐藏原生复选框 */
.ios-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* 自定义复选框样式 */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

/* 当复选框被选中时的样式 */
.ios-checkbox input:checked ~ .checkmark {
  background-color: #b3daff; /* iOS 风格的蓝色 */
}

/* 添加勾选标记 */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* 当复选框被选中时显示勾选标记 */
.ios-checkbox input:checked ~ .checkmark:after {
  display: block;
}

/* 勾选标记的样式 */
.ios-checkbox .checkmark:after {
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* 响应式设计：竖屏设备优化 */
@media (max-width: 768px) and (orientation: portrait) {
  .btn {
    background: linear-gradient(135deg, #e3f2fd, #d1e8ff); /* 与背景渐变更匹配的冷色调渐变 */
    color: #333; /* 深色文字，提升可读性 */
    border-radius: 20px; /* 适中的圆角，符合移动端设计 */
    font-size: 16px; /* 在小屏幕上稍微减小字体大小 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 更柔和的阴影 */
  }

  .btn:hover {
    background: linear-gradient(135deg, #d1e8ff, #e3f2fd); /* 悬停时反转渐变 */
    box-shadow: 0 6px 18px rgba(106, 17, 203, 0.2); /* 更柔和的悬停阴影 */
  }
  .login-container {
    background: linear-gradient(
      225deg,  /* 改为对角线反方向 */
      #e3f2fd 0%,      /* 冰川蓝 */
      #d1e8ff 32%,     /* 增强冷色段 */
      #e8e0f5 67%,    /* 引入浅紫色偏移 */
      #f0f5ff 100%    /* 高光白色 */
    );
    background-size: 400% 400%;
    animation: gradient 12s cubic-bezier(0.4,0,0.2,1) infinite;
  }

  @keyframes gradient {
    0% {
      background-position: 0% 0%;
      opacity: 0.98;  /* 初始透明度微调 */
    }
    30% {
      background-position: 85% 70%;
    }
    60% {
      background-position: 100% 100%;
      opacity: 1;     /* 中间阶段完全显现 */
    }
    100% {
      background-position: 0% 0%;
      opacity: 0.98;
    }
  }
}


</style>
